<template>
	<view class="personal">
		<view class="userinfo">
			<view class="usertop">
				<!-- <view class="navbar-title">我的</view> -->
				<image class="userimg" :src="portrait&&portrait!==''&& portrait!==null ? portrait : localIconSrc('moren.png')"></image>
				<view class="usertext">
					<view class="username" v-if="!apiPick" @click="toLogin">请登录</view>
					<view class="username" v-else>{{ username || '微信用户' }}</view>
					<view class="usertag">{{ usertag }}</view>
				</view>
			</view>
		</view>
		<view class="cash">
			<view class="wallet" @click="goWallet">
				<view class="wallet-pre">
					<view class="wallet-img">
						<image style="width: 100%;height: 100%;" :src="localIconSrc('wallet.png')"></image>
					</view>
					<!-- <image class="wallet-img" :src="localIconSrc('wallet.png')"></image> -->
					<view class="cashtext">钱包</view>
				</view>
				<view class="amount">￥{{ amount || '0.00' }}</view>
			</view>
			<view class="order" @click="goOrder">
				<view style="position: absolute;left: 50%;transform: translateX(-50%); display: flex;">
					<view class="orderimg">
						<image style="width: 100%; height: 100%;" :src="localIconSrc('order.png')"></image>
					</view>
					<view class="ordertext" style="line-height: 48rpx; font-weight: bold; width: 100%;color: #333; font-size: 32rpx;">订单</view>
				</view>
			</view>
		</view>
		<view class="free">
			<view
			  class="free-title"
				v-if="isDubMember != 1 && isAiMember != 1 && isDrawMember!=1"
			>今日免费特权</view>
			<view class="free-title2" v-else>我的特权</view>
			<view class="free-list">
				<!-- AI配音 -->
				<view
					:class="isDubMember == 1 ? 'member-item' : ''"
					class="free-item"
					:style="{
						'background': isDubMember == 1 ? '#333' : '#fff',
					}"
				>
				<!-- 不是会员 -->
					<view class="item-text"
					v-if="isDubMember != 1"
					:style="{
						'border-bottom': isDubMember == 1 ? '1px solid #62594D' : '1px solid #f5f5f5',
					}">AI配音</view>
					<!-- 配音会员 -->
					<view class="item-text"
					v-if="isDubMember == 1"
					:style="{
						'color': isDubMember == 1 ? '#FFC069': '#666',
						'border-bottom': isDubMember == 1 ? '1px solid #62594D' : '1px solid #f5f5f5',
					}">
						<text v-if="dubLevel == 0">普通会员</text>
						<text v-if="dubLevel == 1">配音黄金会员</text>
						<text v-if="dubLevel == 2">配音铂金会员</text>
					<!-- {{ dubLevel == 1 ? '配音黄金会员' : '配音铂金会员'}} -->
					</view>
					
					<view
					  class="item-free"
						:style="{
							'color': isDubMember == 1 ? '#fff' : '#333',
						}"
					>{{ isDubMember != 1 ? '今日免费' : '可用字数'}}</view>
					<view class="priv-text1">
						<!-- <text class="number">{{ freeNumber }}</text>
						<text
						class="unit"
						:style="{
							'color': member ? '#d7b285' : '#333',
						}"
						>字</text> -->
						<view class="zishu">
							<view>
								<text
								:style="{
									'color': isDubMember == 1 ? '#eabe87' : '#ff6005',
								}"
								class="pigment-num">{{ dubDay }} </text>
								<text class="dub-mon">字/日</text>
							</view>
							<view>
								<text
								class="pigment-num"
								:style="{
									'color': isDubMember == 1 ? '#eabe87' : '#ff6005',
								}"
								>{{ dubMOn }} </text>
								<text class="dub-mon">字/月</text>
							</view>
						</view>
						<view
						class="item-line" 
						:style="{
							'border-bottom': isDubMember == 1 ? '1px solid #62594D' : '1px solid #f5f5f5',
						}"></view>
					</view>
					<view
					class="delayTime"
					:style="{
						'color': isDubMember == 1 ? '#fff' : '#333',
					}"
					v-if="isDubMember == 1"
					>{{ dubTime }}到期</view>
					<button
					v-else
					class="free-btn"
					:style="{
						'background': isDubMember == 1 ? '#d7b285' : '#ff6005',
						'color': isDubMember == 1 ? '#9b5f16' : '#fff'
					}"
					@click="buyPaint(0)"
					>升级VIP</button>
				</view>
				<!-- AI写作 -->
				<view
					:class="isAiMember == 1 ? 'member-item' : ''"
					class="free-item"
					:style="{
						'background': isAiMember == 1 ? 'linear-gradient(to right, #F8EDE0, #F1DEC7)' : '#fff',
					}"
				>
					<view class="item-text"
					:style="{
						'border-bottom': isAiMember == 1 ? '1px solid #d7b285' : '1px solid #f5f5f5',
					}">AI创作</view>
					<view
					  class="item-free"
						:style="{
							'color': isAiMember == 1 ? '#9b5f16' : '#333',
						}"
					>{{ isAiMember != 1?'今日免费':'可用字数' }}</view>
					<view class="priv-text">
						<text v-if="isTem" class="number">{{ isAiMember != 1 ? aiWriting:'不限字数' }}</text>
						<text v-else class="number">{{ isAiMember != 1 ? aiWriting:ziNum }}</text>
						<text
						class="unit"
						:style="{
							'color': isAiMember == 1 ? '#d7b285' : '#333',
						}"
						>{{ isAiMember != 1?'次':'' }}</text>
						<!-- <view class="zishu">
							<text class="pigment">可用字数</text>
							<text class="pigment-num">{{ ziNum }}</text>
						</view> -->
					</view>
					<view
					class="item-line" 
					:style="{
						'border-bottom': isAiMember == 1 ? '1px solid #d7b285' : '1px solid #f5f5f5',
					}"></view>
					<view v-if="isAiMember == 1" class="delayTime">{{ aiExpTime }}到期</view>
					<button
					v-else
					class="free-btn"
					:style="{
						'background': isAiMember == 1 ? '#d7b285' : '#ff6005',
						'color': isAiMember == 1 ? '#9b5f16' : '#fff'
					}"
					@click="buyPaint(2)"
					>购买套餐</button>
				</view>
				<!-- AI绘画 -->
				<view
					:class="isDrawMember == 1 ? 'member-item' : ''"
					class="free-item"
					:style="{
						'background': isDrawMember == 1 ? 'linear-gradient(to right, #F8EDE0, #F1DEC7 )' : '#fff',
					}"
				>
					<view class="item-text"
					:style="{
						'border-bottom': isDrawMember == 1 ? '1px solid #d7b285' : '1px solid #f5f5f5',
					}">AI绘画</view>
					<view
					  class="item-free"
						:style="{
							'color': isDrawMember == 1 ? '#9b5f16' : '#333',
						}"
					>{{ isDrawMember != 1?'今日免费':'可用颜料'}}</view>
					<view class="priv-text">
						<text class="number">{{ isDrawMember != 1?aiPainting:pigment }}</text>
						<text
						class="unit"
						:style="{
							'color': isDrawMember == 1 ? '#d7b285' : '#333',
						}"
						>{{ isDrawMember != 1?'次':'支'}}</text>
						<!-- <view class="zishu">
							<text class="pigment">可用颜料</text>
							<text class="pigment-num">{{ pigment }}</text>
							<text class="pigment">支</text>
						</view> -->
					</view>
					<view
					class="item-line" 
					:style="{
						'border-bottom': isDrawMember == 1 ? '1px solid #d7b285' : '1px solid #f5f5f5',
					}"></view>
					<view v-if="isDrawMember == 1" class="delayTime timeColor" @click="buyPaint(1)">{{ drawExpTime }}到期</view>
					<button
						v-else
						class="free-btn"
						:style="{
							'background': isDrawMember == 1 ? '#d7b285' : '#ff6005',
							'color': isDrawMember == 1 ? '#9b5f16' : '#fff'
						}"
						@click="buyPaint(1)"
					>购买套餐</button>
				</view>
			</view>
		</view>
		<view class="setup">
			<view class="serve" @click="goServer">
				<view class="serve-prev">
					<image class="serve-img" :src="localIconSrc('fakui.png')"></image>
					<view class="serve-text">反馈与服务</view>
				</view>
				<!-- <view class="serve-fix">></view> -->
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
			<view class="set-line"></view>
			<view class="serve" @click="goSetup">
				<view class="serve-prev">
					<image class="serve-img" :src="localIconSrc('setup.png')"></image>
					<view class="serve-text">设置</view>
				</view>
				<!-- <view class="serve-fix">></view> -->
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import { resolveDirective } from 'vue'
import { getUserInfo } from '@/api/login.js'
import { getRefreshUser } from '@/api/wallet.js'
	export default {
		data() {
			return {
				username: '', // 昵称
				amount: '', // 钱包
				usertag: 'V1',
				setupList: [
					{text: '反馈与服务' },
					{text: '设置' }
				],
				member: false,
				mobile: '', // 手机号
				aiWriting: 0, // AI创作免费次数
				ziNum: 0, // AI创作字数
				aiPainting: 0, // 绘图今日免费次数
				pigment: 0, // 颜料
				dubTime: '', // 配音会员过期时间
				dubDay: 0, // 	配音字数 （天）
			  dubMOn: 0, // 配音字数 （月）
				portrait: '', // 头像地址
				drawExpTime: '', // 绘画到期时间
				aiExpTime: '', // 创作到期时间
				dubLevel: '', // 配音会员等级 1-黄金会员，2-铂金会员 0-普通会员
				apiPick: false, // 判断是否登录状态
				isDrawMember: 0,	 // 绘图 是否购买。0-不是，1-是
				isDubMember: 0,	  // 配音是否会员，0-不是1-，1-是
				isAiMember: 0, // 创作是否会员，0-不是1-，1-是
				isTem: 0, // ai创作是否临时会员
			} 
		},
		onLoad() {
		},
		onShow() {
			if(uni.getStorageSync('apiticket')) {
				this.apiPick = true
				this.refreshUser();
				this.getUser()
			} else {
				this.apiPick = false
				this.username = ''
				this.amount = ''
				this.freeNumber = 0
				this.aiWriting = 0
				this.aiPainting = 0
				this.dubDay = 0
				this.dubMOn = 0
				this.ziNum = 0
				this.pigment = 0
				this.portrait = ''
				this.isDrawMember = 0	 // 绘图 是否购买。0-不是，1-是
				this.isDubMember = 0	  // 配音是否会员，0-不是1-，1-是
				this.isAiMember = 0 // 创作是否会员，0-不是1-，1-是
				this.isTem = 0
				this.refreshUser();
			}
		},
		onPullDownRefresh() {
			if(uni.getStorageSync('apiticket')) {
				this.refreshUser();
				this.getUser()
			} else {
				this.refreshUser();
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			toLogin() {
				if(!uni.getStorageSync('apiticket')) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}
			},
			getUser() {
				const accessToken = uni.getStorageSync('acctoken')
				const openid = uni.getStorageSync('openid')
				let useStr = {
					"access_token": accessToken,
					"appid": '073820240321128890',
					"openid": openid
				}
				console.log('useStr', useStr)
				getUserInfo(useStr).then(res => {
					console.log('res', res)
					const { amount, nickname, mobile, portrait } = res
					this.username = nickname
					this.amount = amount
					this.mobile = mobile
					this.portrait = portrait
				})
			},
			refreshUser() {
				getRefreshUser().then(res => {
					const { free_num, pigment, zi_num, ai_exp_time, dub_day_zi,is_tem,
					dub_month_zi, free_zi_num, dud_level, dub_exp_time, draw_exp_time,
					h_pigment, h_zi_num, h_dub_day_zi, h_dub_month_zi,is_draw_member,is_dub_member,is_ai_member } = res.data;
					this.aiWriting = free_zi_num,
					this.aiPainting = free_num,
					this.dubTime = dub_exp_time,
					this.dubDay = dub_day_zi,
					this.dubMOn = dub_month_zi,
					this.ziNum = zi_num,
					this.pigment = pigment;
					this.drawExpTime = draw_exp_time;
					this.aiExpTime = ai_exp_time;
					this.dubLevel = dud_level; // 0-普通会员 1-黄金会员 2-铂金会员
					this.isDrawMember = is_draw_member	 //绘图 是否购买。0-不是，1-是
					this.isDubMember = is_dub_member	  //配音是否会员，0-不是1-，1-是
					this.isAiMember = is_ai_member
					this.isTem = is_tem
					console.log('用户信息', res)
					if(h_pigment || h_zi_num || h_dub_day_zi || h_dub_month_zi) {
						this.dubDay = h_dub_day_zi
						this.dubMOn = h_dub_month_zi
						this.pigment = h_pigment
						this.ziNum = h_zi_num
					}
				})
			},
			goOrder() {
				
				if(uni.getStorageSync('apiticket')) {
					uni.navigateTo({
						url: '/pages/order/index',
					});
				} else {
					uni.showModal({
						title: "提示",
						content: "请登录",
						success: res => {
							if (res.confirm) {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.navigateTo({
										url: "/pages/login/index",
									})
							  }, 1000);
							}
						}
					})
				}
				
			},
			goServer() {
				uni.navigateTo({
					url: '/pages/serviceBack/index',
				});
			},
			goWallet() {
				console.log('跳转钱包')
				if(uni.getStorageSync('apiticket')) {
					uni.navigateTo({
						url: `/pages/wallet/index?param=${this.amount}`,
					});
				} else {
					uni.showModal({
						title: "提示",
						content: "请登录",
						success: res => {
							if (res.confirm) {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.navigateTo({
										url: "/pages/login/index",
									})
							  }, 1000);
							}
						}
					})
				}
				
			},
			goSetup() {
				if(!uni.getStorageSync('apiticket')) {
					uni.showModal({
						title: "提示",
						content: "请登录",
						success: res => {
							if (res.confirm) {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.navigateTo({
										url: "/pages/login/index",
									})
							  }, 1000);
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: `/pages/setup/index?username=${this.username}&&mobile=${this.mobile}&&portrait=${this.portrait}`,
				});
			},
			// 购买绘画
			buyPaint(type) {
				if(uni.getStorageSync('apiticket')) {
					uni.navigateTo({
						url: `/pages/memberCenter/index?type=${type}`,
					});
				} else {
					uni.showModal({
						title: "提示",
						content: "请登录",
						success: res => {
							if (res.confirm) {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.navigateTo({
										url: "/pages/login/index",
									})
							  }, 1000);
							}
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		.userinfo {
			background-image: $my-bg;
			height: 460rpx;
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;
			.usertop {
				position:relative;
				// left: 50%;
				// top: 20%;
				// transform: translate(-50%);
			}
			.navbar-title {
				font-size: 32upx;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 5%;
				transform: translate(-50%);
			}
			.userimg {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				margin-top: 200rpx;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}
			.usertext {
				display: flex;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				margin-top: 360rpx;
				.username {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					margin-right: 20rpx;
				}
				.usertag {
					color: #{$main-color};
					font-size: #{$one-title-size};
					font-style: italic;
					font-weight: bold;
				}
			}
		}
		.cash {
			margin: 40rpx 36rpx;
			display: flex;
			// justify-content: space-between;
			.wallet {
				background: #fff;
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 62%;
				// height: 80rpx;
				padding: 28rpx 0;
				// line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 32rpx;
				margin-right: 20rpx;
				.wallet-pre {
					display: flex;
					align-items: center;
					// border: 1px solid red;
					.wallet-img {
						width: 48rpx;
						height: 48rpx;
						padding-bottom: 4rpx;
						margin-right: 20rpx;
						// border: 1px solid blue;
					}
					.cashtext {
						font-weight: bold;
						font-size: 32rpx;
					}
				}
				.amount {
					color: #{$main-color};
				}
			}
			.order {
				display: flex;
				align-items: center;
				background: #fff;
				width: 36%;
				// height: 80rpx;
				padding: 28rpx 0;
				border-radius: 20rpx;
				position: relative;
				.orderimg {
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				.ordertext {
					font-size: 32rpx;
					white-space: nowrap;
				}
			}
		}
		.free {
			margin: 40rpx 36rpx;
			.free-title {
				font-size: #{$one-title-size};
				color: #{$one-title-color};
				font-weight: bold;
				background-image: linear-gradient(0deg, #ff6005, transparent 30%, transparent);
				width: 192rpx;
				height: 36rpx;
				margin-bottom: 32rpx;
			}
			.free-title2{
				font-size: #{$one-title-size};
				color: #{$one-title-color};
				font-weight: bold;
				background-image: linear-gradient(0deg, #ff6005, transparent 30%, transparent);
				width: 128rpx;
				height: 36rpx;
				margin-bottom: 32rpx;
			}
			.free-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.free-item {
					height: 100%;
					width: 210rpx;
					// background: #fff;
					border-radius: 20rpx;
					padding: 20rpx 0;
					.item-text {
					  font-size: #{$text-size};
						color: #{$two-title-color};
						text-align: center;
						font-weight: bold;
						padding-bottom: 20rpx;
					}
					.item-free {
						font-size: #{$auxiliary-size};
						// color: #{$one-title-color};
						text-align: center;
						margin-top: 36rpx;
					}
					.priv-text1 {
						text-align: center;
					  margin-top: 20rpx;
					}
					.priv-text {
						// margin-top: 60rpx;
						padding: 30rpx 0;
						text-align: center;
						.number {
							font-size: #{$one-title-size};
							color: #{$main-color};
						}
						.unit {
							font-size: #{$auxiliary-size};
							color: #{$sub-color};
						}
						.zishu {
							font-size: #{$auxiliary-size};
							margin-top: 10rpx;
						}
					}
					.item-line {
						margin: 20rpx 36rpx 20rpx 36rpx;
						border-bottom: 1px solid #f5f5f5;
					}
					.free-btn {
						color: #fff;
						background: #{$main-color};
						border-radius: 40rpx;
						height: 56rpx;
						width: 180rpx;
						line-height: 56rpx;
						font-size: #{$text-size};
						margin-top: 12rpx;
					}
					.delayTime {
						text-align: center;
						font-size: #{$explain-size};
						margin-top: 12rpx;
						height: 56rpx;
						line-height: 56rpx;
					}
					// .timeColor {
					// 	color: #47ACF5;
					// }
				}
			}
		}
		.setup {
			margin: 0 36rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.serve {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: #{$one-title-size};
				color: #{$one-title-color};
				height: 60rpx;
				line-height: 60rpx;
				padding: 20rpx;
				.serve-prev {
					display: flex;
					align-items: center;
					.serve-img {
						height: 48rpx;
						width: 48rpx;
					}
					.serve-text {
						margin-left: 20rpx;
					}
				}
			}
			.set-line {
				border-bottom: 1px solid #f5f5f5;
				margin: 0 20rpx;
			}
		}
	}
	.pigment-num {
		font-size: #{$one-title-size};
		color: #{$main-color};
	}
	.dub-mon {
		margin-right: 10rpx;
		font-size: #{$auxiliary-size};
		color: #{$sub-color};
	}
	
</style>